<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>独立scope对象</title>
		<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css" />
		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body ng-app="myApp">
		<!--
        	作者：maweichao90@126.com
        	时间：2016-01-02
        	描述：自定义指令
        -->
		<div class="col-md-6" ng-controller="mycontroller">

			<h1>单向数据绑定</h1>
			<super-man flavor="{{name}}"> </super-man>
			<super-man> </super-man>
			<div super-man> </div>

			<h1>双向数据绑定</h1>
			<h4>控制器中的input</h4>
			<input type="text" ng-model="heimiaomi" /> 
			<h4>指令中的input</h4>
			<div shuangxiang  heimiao="heimiaomi"></div>

			<h1>& 的绑定方法</h1>
			<div &bangding say="heimiaosay(name)"></div>
		</div>
		<script type="text/javascript">
			var mymodule = angular.module('myApp', []);
			mymodule.controller("mycontroller", ['$scope', function($scope) {
				$scope.name = "黑猫单项绑定实例";
				$scope.heimiaosay = function(name) {
					$scope.name=name;
				}
			}]);
			
			
			mymodule.directive('superMan', function() {
				return {
					restrict: 'AEMC',
					//独立每个指令的空间 可以去掉看效果噢噢！！！！
					//绑定策略  @绑定字符串   =双向绑定   &调用父级方法而使用
					scope: {
						flavor: '@',
					},
					template: "<div>{{flavor}}</div>",
					link: function(scope, element, attr) {
						//为自定义指令内部绑定事件
					}
				}
			});
			//=号的绑定
			mymodule.directive('shuangxiang', function() {
				return {
					restrict: 'AEMC',
					//  =双向绑定    
					scope: {
						heimiao: '='
					},
					template: "<div><input ng-model='heimiao'></div>",
					link: function(scope, element, attr) {
						//为自定义指令内部绑定事件
					}
				}
			});
			
			//&符号的绑定
			//指令调用控制器内部的方法
			mymodule.directive('&bangding', function() {
				return {
					restrict: 'AEMC',
					//  =双向绑定    
					scope: {
						say: '&'
					},
					template: "<div><input ng-model='userName'></div><button ng-click='say({name:userName})'>调用控制器内的方法</button>",
					
					link: function(scope, element, attr) {
						//为自定义指令内部绑定事件
						//scope.say({name:"userName"})
					}
				}
			});
		</script>
	</body>

</html>